<%@ page contentType="text/html;charset=UTF-8" language="java"%>

<!-- Jstl and config,Start -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!-- Jstl and config,End -->

<!-- Define page variable here,Start -->
<c:set var="app_home" scope="page" value="${pageContext.request.contextPath}" />
<c:set var="jRating_home" scope="page" value="${pageContext.request.contextPath}/jRating-master" />
<c:set var="bootstrap_home" scope="page" value="${pageContext.request.contextPath}/bootstrap-2.3.1"/>
<!-- Define page variable here,End -->

<!DOCTYPE HTML>

<head>
   <title>Boots Templates</title>
  
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="GameRank" />
   <meta name="keywords" content="game rankings" />
   <meta name="author" content="Steve Missing"/>
   
   <link href="${app_home}/css/main.css" rel="stylesheet" type="text/css">
   <link href="${ bootstrap_home}/css/bootstrap.min.css" rel="stylesheet" media="screen">
   <link href="${ jRating_home}/jquery/jRating.jquery.css" rel="stylesheet" type="text/css"  media="screen" />

</head>

<body >
   <div class="myContainer container-fluid">
		<div class="row-fluid">
			<div class="span8">
				<table class="table table-condensed table-hover display"
					id="example">
					<caption>This is table caption here</caption>
					<thead>
						<tr>
							<th>id</th>
							<th>enName</th>
							<th>siteRating</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
			<div class="span4">
				<ul class="breadcrumb">
					<li><a href="#">Home</a> <span class="divider">/</span></li>
					<li><a href="#">Library</a> <span class="divider">/</span></li>
					<li class="active">Data</li>
				</ul>
			</div>
		</div>
	</div>
	
	<div class='basic' data-average='12' data-id='1'></div> 
	
   <script type="text/javascript" language="javascript" src= "${app_home}/js/jquery/jquery-1.8.1.js" ></script>
   <script type="text/javascript" language="javascript" src=" ${app_home}/js/jquery/plugin/dataTables/jquery.dataTables.js"></script>
   <script type="text/javascript" src="${ jRating_home}/jquery/jRating.jquery.js"></script>
   <script type="text/javascript" src="${ bootstrap_home}/js/bootstrap.min.js"></script>

   <script type="text/javascript">
   $(function() {
	    
	   $(".basic").jRating();
	   
		var oTable = $('#example').dataTable({
			"bProcessing" : true,
			"bServerSide": true,
			"bDeferRender": true,
			"bFilter": false,
			"bSort": false,
			"bPaginate": false,
			"bSortClasses": false,
			"bLengthChange": false,
			"bSortClasses": false,
			"bInfo": false,
			"sAjaxSource" : "${app_home}/game/list.action",
			"aoColumns" : [{
				"mData" : "id",
				"bVisible":false
			},{
				"mData": function ( source, type, val ){
                	return "<a target='_blank' href='"+source.url+"'>"+source.enName+"</a>";
				}
			},{
				"mData" : "siteRating"
			} ],
			"fnServerData": function(sSource, aoData, fnCallback, oSettings) {
			    oSettings.jqXHR = $.ajax({
			        "dataType": 'json',
			        "type": "POST",
			        "url": sSource,
			        "data": aoData,
			        "success": fnCallback
			    });
			},
			"sPaginationType": "full_numbers",
			"fnServerParams": function ( aoData ) {
			      aoData.push( { "name": "bNeedPaging", "value": "true" } );
			}
		});
});
   </script>
</body>
</html>
